<template>
    <div class="charts">
        <div class="line">
            <Line></Line>
        </div>
        <div class="chart-gruop">
            <div class="bar">
                <Bar></Bar>
            </div>
            <div class="bar">
                <Pie></Pie>
            </div>
            <div class="bar">
                <Radar> </Radar>
            </div>
        </div>
    </div>
</template>

<script setup>
import Line from './Line.vue';
import Bar from './Bar.vue';
import Pie from './Pie.vue';
import Radar from './Radar.vue';
</script>
<style lang="less" scoped>
.charts {
    margin-top: 12px;

    .line {
        width: 100%;
        height: 240px;
        padding: 12px;
        background-color: #fff;
    }

    .chart-gruop {
        margin-top: 12px;
        display: flex;
        gap: 12px;

        .bar {
            flex: 1;
            height: 220px;
            padding: 12px;
            background-color: #fff;
        }
    }
}
</style>
